<template>
  <div class="common-card ds-analysis-card bg-white">
    <dc-cell class="main-title home" title="菜品分析" value="详情" sVal="true" :to="'/dishAnalysis'" isLink></dc-cell>
    <div class="dish-wrapper flex">
      <div class="text-left aln-center flex p10">
        <img class="dish-img mr30 ml30" alt=""
             :src="popular.photo || '../static/icon-default-dish.png'"/>
        <div class="dish-title">
          <div class="name">
            {{popular.dishName}}
            <span class="num">销量<tshSpan :value ='popular.sellNum'></tshSpan>份</span>
          </div>
        </div>
      </div>
      <div class="aln-center flex text-right">
        <img class="mr20" alt="" width="40" height="40"
             src="../../../assets/dish_crown.png"/>
        <span class="b f32">销量冠军</span>
      </div>
    </div>
    <div class="dish-wrapper flex">
      <div class="text-left aln-center flex p10">
        <img class="dish-img mr30 ml30" alt=""
             :src="profit.photo || '../static/icon-default-dish.png'"/>
        <div class="dish-title">
          <div class="name">
            {{profit.dishName}}
            <span class="num">销售额<tshSpan :value ='profit.dishAmount'></tshSpan>元</span>
          </div>
        </div>
      </div>
      <div class="aln-center flex text-right">
        <img class="mr20" alt="" width="40" height="40"
             src="../../../assets/dish_crown.png"/>
        <span class="b f32">销售额冠军</span>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/common/api/dishAnalysis';
  import cell from '@/common/plugins/cell';
  export default {
    data () {
      return {
        popular: {
          sellNum: 0,
          dishName: '暂无'
        },
        profit: {
          dishAmount: 0,
          dishName: '暂无'
        }
      };
    },
    components: {
      'dc-cell': cell
    },
    activated () {
      let data = {
        timeFlag: -1
      };
      this.popular = {sellNum: 0, dishName: '暂无'};
      this.profit = {dishAmount: 0, dishName: '暂无'};
      this._getPopularDish(data);
      this._getProfitableDish(data);
    },
    created () {
      let data = {
        timeFlag: -1
      };
      this._getPopularDish(data);
      this._getProfitableDish(data);
    },
    methods: {
      //获取销量冠军菜品
      _getPopularDish (data) {
        api.getFoodPopular(data)
          .then(res => {
            if (res && res.dishName) {
              // **************************************
            //代理商大会结束之后询问经理删除即可
              if (res.isTest) {
                res.dishName = `测试菜品1`;
              }
              // **************************************
              this.popular = res;
            }
          });
      },
      //获取盈利冠军菜品
      _getProfitableDish (data) {
        api.getFoodProfitable(data)
          .then(res => {
            if (res && res.dishName) {
              if (res.isTest) {
                res.dishName = `测试菜品2`;
              }
              this.profit = res;
            }
          });
      }
    }
  };
</script>

<style lang="scss">
  @import "../../../assets/css/variable";

  .ds-analysis-card {
    .flex {
      display: flex;
    }
    .text-left {
      text-align: left;
      flex: 6;
    }
    .text-right {
      flex: 4;
    }
    .dish-wrapper {
      justify-content: space-around;
    }
    .dish-img {
      width: px2rem(140px);
      height: px2rem(140px);
    }
    .dish-title {
      display: table;
      .name {
        display: table-cell;
        vertical-align: middle;
        font-size: px2rem(24px);
        color: #666;
        .num {
          display: block;
          font-size: px2rem(30px);
          font-weight: bold;
          margin-top: px2rem(15px);
          color: #333;
        }
      }
    }
    .aln-center {
      align-items: center;
    }
    .b {
      font-weight: bold;
    }
    .f32 {
      font-size: px2rem(32px);
    }
    .p10 {
      padding: px2rem(10px);
    }
    .box {
      margin: 20px auto;
      width: 300px;
      height: 200px;
      background-color: #66cf8e;
    }
  }
</style>
